import React, { useState, useEffect } from "react";

function HooksTest() {
  const [count, setCount] = useState(0);
  // 声明多个状态变量！
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState("banana");
  const [todos, setTodos] = useState({ text: "Learn Hooks" });
  const diyTest = diyHooks();

  // 类似于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 使用浏览器API更新文档标题
    document.title = `You clicked ${count} times`;
    console.log("use use effect");
    return () => {
      console.log("clean ------ clean");
    };
  });

  return (
    <div>
      <p>
        You clicked {count} times {age} {fruit} {todos.text} {diyTest}
      </p>
      <button
        onClick={() => {
          setCount(count + 1);
          setFruit("apple");
          setTodos({ text: "lllllll" });
        }}
      >
        Click me
      </button>
    </div>
  );
}

export default HooksTest;

function diyHooks() {
  return "aaaaa";
}
